import React, { useContext } from "react"

const ThemeContext = React.createContext('light')
const UserContext = React.createContext({auth: false})

function Nav() {
  return <LoginButton />
}
function LoginButton() {
  // const theme = useContext(ThemeContext)
  // const user = useContext(UserContext)
  // console.log(theme, user)

  // return <button
  //   style={{backgroundColor: theme === 'light' ? 'white': 'black',
  //     color: theme === 'dark' ? 'white': 'black'
  //   }}
  // >{user.auth ? `${user.name}已登录`:'未登录'}</button>
  return <ThemeContext.Consumer>
    {theme => (<UserContext.Consumer>
        {user =>
          <button
            style={{backgroundColor: theme === 'light' ? 'white': 'black',
              color: theme === 'dark' ? 'white': 'black'
            }}
          >{user.auth ? `${user.name}已登录`:'未登录'}</button>
        }
      </UserContext.Consumer>)}
  </ThemeContext.Consumer>
}

export default function MultiConext() {
  return <ThemeContext.Provider value='light'>
    <UserContext.Provider value={{auth: true, name:'xiaozhang'}}>
      <Nav/>
    </UserContext.Provider>
  </ThemeContext.Provider>
}